<template>
  <div id="chat">

    <div>
    <div class="Breadcrumb">
      <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">消息列表</BreadcrumbItem>
        <BreadcrumbItem>碎言碎语</BreadcrumbItem>
        <BreadcrumbItem v-if="!is_edit">{{detail}}</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <Tabs type="card" v-show="is_edit">
      <TabPane label="我的发言"><ChatAll></ChatAll></TabPane>
      <TabPane label="标签二">标签二的内容</TabPane>
      <TabPane label="标签三">标签三的内容</TabPane>
    </Tabs>
    </div>

    <keep-alive>
    <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import ChatAll from './chatItem/chatAll'
export default {
  name: 'chat',
  components:{
    ChatAll
  },
  data(){
    return{
      is_edit:true,
      detail:''
    }
  },
  created(){
    let path = this.$route.path
    if(path.indexOf('/chat/chatAdd') != -1){
      this.is_edit = false
    }
    if(path.indexOf('/chat/update') != -1){
      this.is_edit = false
    }
  },
  beforeUpdate(){

    let path = this.$route.path
    switch(path){
      case '/Admin/chat':
        this.is_edit = true
        break
      case '/chat/chatAdd':
        this.is_edit = false
        this.detail = '添加碎言'
        break
      case '/chat/update':
        this.is_edit = false
        this.detail = '编辑碎言'
    }
  }
}
</script>

<style lang='scss' scoped>
#chat{
    padding: 15px;
    float:right;
    width: calc(100% - 350px);
    margin: 30px;
    margin-top: 110px;
    background: #F5F5FA;
    border-radius: 5px;
}
.Breadcrumb{
    background: #ffffff;
    line-height: 30px;
    margin-bottom: 20px;
}
</style>